<template>
  <div>
    <!-- 员工端首页订单详情 -->
    <div class="header">
      <van-nav-bar title="订单详情" left-arrow @click-left="onClickLeft" />
    </div>
    <!-- 产品展示 -->
    <div
      class="product"
      v-for="orderproduct in orderProductData"
      :key="orderproduct.id"
    >
      <van-card
        v-if="orderproduct.product !== null"
        :price="orderproduct.product.price + '.00'"
        :desc="orderproduct.product.description"
        :title="orderproduct.product.name"
        :thumb="orderproduct.product.photo"
        :num="orderproduct.number"
      />
    </div>
    <div class="sumprice">
      <p class="sum">
        总计：<span style="color: red">¥{{ sumprice }}</span>
      </p>
    </div>
    <div class="address">
      <p class="addressp">
        服务地址：{{ addressData.province }}{{ addressData.city
        }}{{ addressData.area }}{{ addressData.address }}
      </p>
      <p class="addressp">
        联系方式：{{ addressData.username }}({{ addressData.telephone }})
      </p>
      <p class="addressp">下单时间：{{ orderTime | fmtDate }}</p>
      <p class="addressp">服务时间：{{ orderTime | fmtDate }}</p>
      <p class="addressp">{{ orderstatus }}</p>
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
import { get, post, post_json } from "@/http/axios";
import moment from "moment";

export default {
  //时间格式转换
  filters: {
    fmtDate(date) {
      return moment(Number(date)).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  data() {
    return {
      productData: [],
      orderProductData: this.$route.query.orderAllData,
      addressData: this.$route.query.addressData,
      orderTime: this.$route.query.orderTime,
      orderstatus: this.$route.query.orderstatus,
    };
  },
  computed: {
    sumprice() {
      let sumprice = this.orderProductData;
      let sum = 0;
      if (!sumprice) {
        return;
      }
      sumprice.forEach((item) => {
        if (item.product == null) {
          sum = 0;
        } else {
          sum += item.product.price;
        }
      });
      return sum;
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async getProduct() {
      let data = {
        page: 1,
        pageSize: 100,
        //name: this.orderData.orderLines.product.name,
      };
      let res = await get("/product/pageQuery", data).then((res)=>{
        this.productData = res.data.data.list;
      });
      
      // console.log(this.orderProductData);
      // console.log(this.addressData);
      // console.log(this.productData);
      // console.log(this.orderTime);
    },
  },
  created() {
    //自动获取产品详细数据
    this.getProduct();
  },
};
</script>

<style scoped>
.header .van-nav-bar {
  width: 100%;
  height: 48px;
  background-image: linear-gradient(90deg, #bf73ff, #7579ff);
  text-align: center;
  line-height: 48px;
  /* color: #fff; */
  letter-spacing: 0.4em;
}
.van-nav-bar .van-icon {
  /* color: #fff; */
  height: 50px;
}
.sumprice .sum {
  float: right;
  margin-right: 15px;
}
.address {
  width: 90%;
  margin: 0 auto;
  margin-top: 50px;
  background-color: #f8f8f8;
  padding: 1em 0.5em;
}
.address .addressp {
  margin-bottom: 0.5em;
  font-size: 12px;
  color: #999;
}
.address .status{
  float: right;
}
</style>